<template>
  <div class="app">
  <MyHeader @addTodo="addTodo"/>
    <List :todos="todos" :change="change" :deleteTodo="deleteTodo"/>
    <MyFooter :todos="todos" @checkedAll="checkedAll" @cleanAll="cleanAll"/>
  </div>
</template>


<script>
//汇总引入组件
import MyHeader from "@/components/MyHeader.vue";
import List from "@/components/List.vue";
import MyFooter from "@/components/MyFooter.vue";

export default {
  name:'App',
  //组件
  components:{
    MyHeader,MyFooter,List
  },
  //初始数据对象
  data(){
    return  {todos:JSON.parse(localStorage.getItem('todos'))||[]
  }},
  methods:{
    //添加todo
    addTodo(a){
   this.todos.unshift(a)
    },
    //改变状态
    change(todo){
      todo.done = !todo.done;
    },
    //删除数据todo
    deleteTodo(id){
      //过滤后替换
    this.todos =   this.todos.filter((todo)=>{
        return todo.id!==id
      })
    },
    //检查全部是否完成
    checkedAll(done){
        this.todos.forEach((todo)=>{
          todo.done=done
        })
    },
    //清空全部已完成任务
    cleanAll() {
      this.todos=this.todos.filter((todo)=>{
        return todo.done!==true
      })
    }

  },
  watch:{
    //本地存储
    todos:{
      //深度监视
      deep:true,
      handler(val){
        localStorage.setItem('todos',JSON.stringify(val))
      }    }
  }
}
</script>








<style>
.app{
  margin: 0 auto;
  width: 600px;
  font-size: 14px;
  border: 1px solid darkgray;
  border-radius: 4px;
  padding: 4px 7px;
}
.btn{
  background-color: red;
}

</style>
